<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>试管放置演示</title>
    <link rel="stylesheet" href="stylesheets/main.css">
</head>
<body>
    <div id="panel">
        <div>
            <div class="count">
                <label>新增试管数</label>
                <div id="counternew" class="counter">0</div>
            </div>
            <div class="count">
                <label>使用试管数</label>
                <div id="counter" class="counter">0</div>
            </div>
        </div>
        <div id="tube">
            <label>放置试管数目</label>
            <input type="text" id="tubenum" placeholder="请输入[1,64]之间的整数">
        </div>
        <div id="arm">
            <label>机械臂位置</label>
            <select>
                <option value="1">上</option>
                <option value="3">下</option>
                <option value="2">左</option>
                <option value="0" selected>右</option>
            </select>
        </div>
        <div>
            <button type="button" id="start">开始放置</button>
            <button type="button" id="reset">重新开始</button>
        </div>
    </div>
    <div id="container">
        <!-- table at top --> 
        <table id="top">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <!-- table at right -->
        <table id="right">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <!-- table at bottom -->
        <table id="bottom">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <!-- table at left -->
        <table id="left">
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div id="horizontal"></div>
        <div id="vertical"></div>
    </div>
    <script src="javascripts/jquery.js"></script>
    <script src="javascripts/jquery.rotate.js"></script>
    <script src="javascripts/main.js"></script>
</body>
</html>